<template>
  <div style="width: 60%; margin: 10px auto">
    <div style="margin-bottom: 20px">
      <el-input v-model="data.name" size="large" style="width: 500px; margin-right: 10px" placeholder="请输入宠物店名称"></el-input>
      <el-button size="large" type="primary" @click="load">搜索</el-button>
      <el-button size="large" type="info" @click="reset">重置</el-button>
    </div>
    <div style="margin: 20px 0" v-if="data.total > 0">
      <div class="card" style="margin-bottom: 10px; padding: 20px; display: flex" v-for="item in data.tableData" :key="item.id">
        <div style="flex: 1; display: flex; grid-gap: 20px; cursor: pointer" @click="router.push('/front/petShopDetail?id=' + item.id)">
          <img :src="item.avatar" style="width: 100px; height: 100px">
          <div style="flex: 1; display: flex; flex-direction: column; justify-content: space-around">
            <div style="font-size: 20px; font-weight: bold">{{ item.name }}</div>
            <div style="margin: 10px 0"><span style="color: #666">售卖宠物：</span>{{ JSON.parse(item.sellPet || '[]').join('、') }}</div>
          </div>
        </div>
        <div style="flex: 1">
          <el-row :gutter="20">
            <el-col :span="6" v-for=" pet in (item.petList || []).slice(0, 3)" :key="pet.id">
              <img :src="pet.image" style="width: 100px; height: 100px; border-radius: 50%; cursor: pointer" @click="router.push('/front/petDetail?id=' + pet.id)">
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="margin-top: 20px" v-if="data.total">
        <el-pagination
            @current-change="load"
            @size-change="handleSizeChange"
            background layout="total, prev, pager, next, jumper, sizes"
            :page-sizes="[1, 3, 5, 10, 15, 20, 30]"
            :page-size="data.pageSize"
            v-model:current-page="data.pageNum"
            :total="data.total"/>
      </div>
    </div>
    <div style="padding: 20px; text-align: center; color: red" v-else>暂无搜索结果...</div>

  </div>
</template>

<script setup>
  import { reactive } from "vue";
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";
  import router from "@/router/index.js";

  const data = reactive({
    pageNum: 1,
    pageSize: 10,
    name: null,
    total: 0,
    tableData: []
  })

  window.scrollTo({top: 0})

  const load = () => {
    request.get('/petShop/pageQuery', {
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        name: data.name,
        status: '审核通过'
      }
    }).then(res => {
      if (res.code === '200') {
        data.tableData = res.data?.list || []
        data.total = res.data?.total
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
  load()

  const reset = () => {
    data.name = null
    load()
  }

  const handleSizeChange = (newSize) => {
    data.pageSize = newSize
    data.pageNum = 1  // 切换页大小时重置到第一页
    load()
  }

</script>

<style>

</style>